<template>
  <div class="user-name-sign-wrapper">
    <div class="avatar-wrapper" @click="open('/user/profile')">
      <img :src="userAvatarUrl" alt="avatar" class="avatar" />
    </div>

    <div class="name-sign">
      <h2 class="name">{{ user.name }}</h2>
      <h3 class="sign">{{ user.sign }}</h3>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import config from '@/config'
import { open } from '@/utils/link';

const props = defineProps<{
  user: App.User
}>()

let userAvatarUrl = computed(() => {
  return props.user.avatar
    ? config.baseURL + props.user.avatar
    : config.baseURL + config.defaultAssetUrls.avatar
})
}
</script>

<style lang="less" scoped>
@w: var(--userNameSignWidth);
@h: var(--userNameSignHeight);

.user-name-sign-wrapper {
  width: @w;
  height: @h;

  .avatar-wrapper,
  .name-sign {
    float: left;
  }

  .avatar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40%;
    height: @h;

    .avatar {
      --a: calc(@h * 0.6);
      width: var(--a);
      height: var(--a);

      border-radius: 50%;
    }

    &:hover {
      cursor: pointer;
    }
  }

  .name-sign {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 60%;
    height: @h;

    h2 {
      line-height: calc(@h * 0.3);
      font-size: calc(@h * 0.22);
    }

    h3 {
      height: calc(@h * 0.3);
      line-height: calc(@h * 0.3);
      font-size: calc(@h * 0.15);

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
